<template>
	<view>
		<view class="container-title">
			<Title>场景歌单</Title>
			<!-- <u-icon class="more-icon" name="arrow-right" @click="showMore"></u-icon> -->
		</view>
		<view class="item-list">
			<view class="item" v-for="item in dataList.slice(0, 10)" :key="i" @click="playCurrent(item)">
				<view class="img-view">
					<img :src="item.images.poster.url" />
				</view>
				<text>{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBlockList,
		getCategoryMusicList,
		playMusic
	} from '@/apis/music.js'
	export default {
		data() {
			return {
				dataList: []
			}
		},
		mounted() {
			this.initData()
		},
		methods: {
			async playCurrent(item) {
				const {
					data
				} = await getCategoryMusicList({
					deviceId: this.DeviceId,
					categoryId: item.id
				})
				let songList = data.songList.map(item => {
					return {
						audioId: item.audioID,
						songId: item.songID,
						during: item.duration,
						url: item.playUrl
					}
				})
				// 播放
				await playMusic({
					deviceId: this.DeviceId,
					musiList: songList,
					offset: 0
				})
			},
			async initData() {
				const {
					data
				} = await getBlockList({
					deviceId: this.DeviceId,
					blockId: '718453'
				})
				this.dataList = data.items
			},
			showMore() {
				uni.navigateTo({
					url: '/pages/music/allSongSheet?type=123'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../../assets/css/index-list.scss';

	.recommend-container {
		display: flex;
		justify-content: space-between;
		width: 100%;

		.item-container {
			width: 17%;

			img {
				width: 100%;
				border-radius: 4px;
			}

			text {
				line-height: 40px;
			}
		}
	}
</style>